<template>
  <div>
    <div>
      <h3>个人信息</h3>
      <p>用户名：<span>{{user_name}}</span></p>
      <p>客户端临时ID：<span>{{cli_id}}</span></p>
      <p>账户身份: <span>{{grade_name}}</span></p>
      <p>邮箱: 
        <span>
          {{user_mail}}
        </span>
        <button @click="showMailInput">绑定邮箱</button>
      </p>
      <section v-show="mail_bind">
        <input type="email" name="anti_autoComplete_mail" hidden/>
        邮箱<input type="email" v-model="new_mail"/>
        <button @click="sendEmail">发送验证码</button>
        <span v-show="watch_email">验证码已发送</span>
        <div>
          验证码<input type="text" v-model="captcha" >
          <input type="submit" @click="bindEmail" value="验证">
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:'UserInfo',
  data() {
    return {
      user_name: this.$store.state.userName,
      cli_id: this.$store.state.clientId,
      grade_name: '',
      mail_bind: false, // 邮件地址输入框显示
      user_mail: this.$store.state.email,
      new_mail:'',
      captcha:'',
      watch_email:false
    }
  },
  computed: {
    mail_format(){
      return Boolean(/^[\w-]+@[\w-]+(\.[\w-]+)+$/g.test(this.user_mail));
    }
  },
  methods: {
    showMailInput(){
      this.mail_bind = !this.mail_bind;
    },
    cleanSpace(){
      this.new_mail = '';
    },
    sendEmail(){
      const requireA = axios.create({
        baseURL: "",
      });
      var post_info = {
        account: this.user_name,
        mail:this.new_mail,
        token:this.$store.state.token
      };
      requireA({
        url: "/apiMailCheck",
        method: "POST",
        data: post_info,
      }).catch(function (error) {
        if (error.response) {
          console.log('登录请求失败',error.response.status);
        } else {
          console.log('Error', error.message);
          console.log(error.config);
        }
      }).then((res)=>{
        if (!res){
          return
        }
        if (res['data']=='Send Ok') {
          this.watch_email = true;
        }else{
          // console.log(res['data'],'response',typeof( res['data']));
          window.alert(res['data']);
        }
      });
    },
    bindEmail(){
      const requireA = axios.create({
        baseURL: "",
      });
      var post_info = {
        account: this.user_name,
        mail:this.new_mail,
        token:this.$store.state.token,
        captcha:this.captcha
      };
      requireA({
        url: "/apiMailSet",
        method: "POST",
        data: post_info,
      }).catch(function (error) {
        if (error.response) {
          console.log('登录请求失败',error.response.status);
        } else {
          console.log('Error', error.message);
          console.log(error.config);
        }
      }).then((res)=>{
        if (!res){
          return
        }
        if (typeof res['data']!='string') {
          let info = JSON.parse(sessionStorage.getItem(this.cli_id));
          info['email'] = res['data'][0];
          var string_info = JSON.stringify(info);
          sessionStorage.setItem(this.cli_id,string_info);
          this.user_mail = res['data'][0];
          window.alert("绑定成功");
        }else{
          // console.log(res['data'],'response',typeof( res['data']));
          window.alert(res['data']);
        }
      });
    },
    getUserSituation(){
      let info = JSON.parse(sessionStorage.getItem(this.cli_id));
      this.$store.commit('userLogin',{'userName': info["user"],'grade':info['grade'],'email':info['email']});
      this.user_mail = info['email']
    },
    defineUserGrade(){
      var grade_dict = {0:'普通用户',1:'词条管理员',2:'站长'}
      let grade_num = this.$store.state.grade;
      this.grade_name = grade_dict[grade_num];
    },
    changePic(){
      this.$parent.getPic();
    }
  },
  mounted() {
    this.getUserSituation();
    this.defineUserGrade();
  },
}
</script>

<style scoped>
</style>